<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>资讯管理---分类管理</title>
  <link rel="stylesheet" href="../../assets/css/layui.css" />
  <link rel="stylesheet" href="../../assets/css/main.css" />
  <script src="../../assets/js/jquery-1.11.1.min.js"></script>
  <script src="../../assets/js/layui.js"></script>
  <script src="../../assets/js/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div class="layui-card tableCard">
      <div class="title-header">分类管理</div>

      <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
        <thead>
          <tr>
            <th width="60">ID</th>
            <th>分类名称</th>
            <th>描述</th>
            <th width="120" class="text-center">操作</th>
          </tr>
        </thead>
        <tr v-for="(item,index) in ArrData" :key="index">
          <td>{{item.id}}</td>
          <td><span class="layui-blue">{{item.field1}}</span></td>
          <td>{{item.field2}}</td>
          <td class="text-center">
            <a href="javascript:" class="layui-blue">编辑</a>
            <a href="javascript:" class="layui-blue" @click="del(index)">删除</a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>

</html>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      ArrData: [{
          id: 1,
          field1: '市场行情',
          field2: '暂无'
        },
        {
          id:2,
          field1: '行内资讯',
          field2: '暂无'
        },
        {
          id: 3,
          field1: '|—同业动态',
          field2: '暂无'
        },{
          id: 4,
          field1: '|—政策导读',
          field2: '暂无'
        }
      ]
    },
    mounted: function () {
      this.init()
    },
    methods: {
      init: function () {
        localStorage.setItem('navigation','<a href="#">首页</a><span lay-separator="">/</span><a href="">资讯管理</a><span lay-separator="">/</span><a><cite>分类管理</cite></a>');
      },
      del: function(index) {
        this.ArrData.splice(index, 1);
      },
    }
  })
</script>